<template>
  <view class="conditioning-container">
    <!-- 顶部导航栏（仅返回按钮） -->
    <view class="back-nav">
      <view class="transparent-back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">调理计划</text>
    </view>
    <view class="header">
      <!-- 商品列表区域 -->
      <scroll-view class="plan-list" scroll-y="true">
        <view class="plan-grid">
          <!-- 有氧训练 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/有氧.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">有氧训练</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 1, title: '有氧训练', imageName: '有氧.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 1, title: '有氧训练', imageName: '有氧.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 大脑训练 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/大脑训练.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">大脑训练</text>
                <view class="plan-score">
                  <text class="score-value">+3.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 2, title: '大脑训练', imageName: '大脑训练.png', score: 3.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 2, title: '大脑训练', imageName: '大脑训练.png', score: 3.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 肝部调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/肝部调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">肝部调理</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 3, title: '肝部调理', imageName: '肝部调理.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 3, title: '肝部调理', imageName: '肝部调理.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 中药调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/中药调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">中药调理</text>
                <view class="plan-score">
                  <text class="score-value">+1.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 4, title: '中药调理', imageName: '中药调理.png', score: 1.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 4, title: '中药调理', imageName: '中药调理.png', score: 1.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 瑜伽 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/瑜伽.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">瑜伽</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 5, title: '瑜伽', imageName: '瑜伽.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn" @click="showPlanDetail({ id: 5, title: '瑜伽', imageName: '瑜伽.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 按摩 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/按摩.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">按摩</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 6, title: '按摩', imageName: '按摩.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn" @click="showPlanDetail({ id: 6, title: '按摩', imageName: '按摩.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 肠道调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/肠道调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">肠道调理</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 7, title: '肠道调理', imageName: '肠道调理.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 7, title: '肠道调理', imageName: '肠道调理.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 心脏训练 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/心脏训练.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">心脏训练</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 8, title: '心脏训练', imageName: '心脏训练.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 8, title: '心脏训练', imageName: '心脏训练.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 助眠 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/助眠.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">助眠</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 9, title: '助眠', imageName: '助眠.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn" @click="showPlanDetail({ id: 9, title: '助眠', imageName: '助眠.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 拉伸 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/拉伸.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">拉伸</text>
                <view class="plan-score">
                  <text class="score-value">+1.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 10, title: '拉伸', imageName: '拉伸.png', score: 1.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 10, title: '拉伸', imageName: '拉伸.png', score: 1.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 五官调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/五官调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">五官调理</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 11, title: '五官调理', imageName: '五官调理.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 11, title: '五官调理', imageName: '五官调理.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 神经调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/神经调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">神经调理</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 12, title: '神经调理', imageName: '神经调理.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 12, title: '神经调理', imageName: '神经调理.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 神经激活 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/神经激活.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">神经激活</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 13, title: '神经激活', imageName: '神经激活.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 13, title: '神经激活', imageName: '神经激活.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 肾部调理 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/肾部调理.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">肾部调理</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 14, title: '肾部调理', imageName: '肾部调理.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 14, title: '肾部调理', imageName: '肾部调理.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 肺部训练 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/肺部训练.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">肺部训练</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 15, title: '肺部训练', imageName: '肺部训练.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 15, title: '肺部训练', imageName: '肺部训练.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 保健 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/保健.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">保健</text>
                <view class="plan-score">
                  <text class="score-value">+1.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 16, title: '保健', imageName: '保健.png', score: 1.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 16, title: '保健', imageName: '保健.png', score: 1.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 音乐 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/音乐.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">音乐</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 17, title: '音乐', imageName: '音乐.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 17, title: '音乐', imageName: '音乐.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 游戏 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/游戏.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">游戏</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 18, title: '游戏', imageName: '游戏.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 18, title: '游戏', imageName: '游戏.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 我的学习 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/我的学习.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">我的学习</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 19, title: '我的学习', imageName: '我的学习.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 19, title: '我的学习', imageName: '我的学习.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 其它活动 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/其它活动.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">其它活动</text>
                <view class="plan-score">
                  <text class="score-value">+1.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 20, title: '其它活动', imageName: '其它活动.png', score: 1.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 20, title: '其它活动', imageName: '其它活动.png', score: 1.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 武术 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/武术.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">武术</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 21, title: '武术', imageName: '武术.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 21, title: '武术', imageName: '武术.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 舞蹈 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/舞蹈.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">舞蹈</text>
                <view class="plan-score">
                  <text class="score-value">+2.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 22, title: '舞蹈', imageName: '舞蹈.png', score: 2.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 22, title: '舞蹈', imageName: '舞蹈.png', score: 2.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 做操 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/做操.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">做操</text>
                <view class="plan-score">
                  <text class="score-value">+1.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 23, title: '做操', imageName: '做操.png', score: 1.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 23, title: '做操', imageName: '做操.png', score: 1.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 健身 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/健身.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">健身</text>
                <view class="plan-score">
                  <text class="score-value">+2.5</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 24, title: '健身', imageName: '健身.png', score: 2.5 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 24, title: '健身', imageName: '健身.png', score: 2.5 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>

          <!-- 剧烈运动 -->
          <view class="plan-item">
            <view class="plan-content">
              <image class="plan-image" src="../../static/shop/剧烈运动.png" mode="aspectFit"></image>
              <view class="plan-info">
                <text class="plan-title">剧烈运动</text>
                <view class="plan-score">
                  <text class="score-value">+3.0</text>
                  <text class="score-text">分</text>
                </view>
              </view>
              <view class="plan-actions">
                <view class="add-btn" @click="addToCart({ id: 25, title: '剧烈运动', imageName: '剧烈运动.png', score: 3.0 })">
                  <text class="add-icon">+</text>
                </view>
                <view class="type-btn"
                  @click="showPlanDetail({ id: 25, title: '剧烈运动', imageName: '剧烈运动.png', score: 3.0 })">
                  <text class="type-icon">></text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 底部操作栏 -->
      <view class="bottom-bar">
        <view class="cart-info">
          <text class="selected-count">已选: {{ cartItems.length }}项</text>
          <text class="total-score">总加分: +{{ totalScore }}分</text>
        </view>
        <view class="action-buttons">
          <button class="detail-btn" @click="viewCartDetail">查看明细</button>
          <button class="checkout-btn" @click="checkout">结算</button>
        </view>
      </view>

      <!-- 计划详情弹窗 -->
      <view class="plan-detail-modal" v-if="showDetailModal">
        <view class="modal-content">
          <view class="modal-header">
            <text class="modal-title">选择调理计划时间</text>
            <view class="close-btn" @click="closeDetailModal">
              <text class="close-icon">×</text>
            </view>
          </view>
          <view class="modal-body">
            <view class="detail-item">
              <image class="detail-image"
                :src="currentPlan ? `../../static/shop/${currentPlan.imageName}` : (editingCartItem ? `../../static/shop/${editingCartItem.imageName}` : '')"
                mode="aspectFit">
              </image>
              <view class="detail-info">
                <text class="detail-title">{{ currentPlan ? currentPlan.title : (editingCartItem ? editingCartItem.title
                  :
                  '') }}</text>
                <text class="detail-score">+{{ currentPlan ? currentPlan.score : (editingCartItem ?
                  editingCartItem.score
                  : 0) }}分</text>
              </view>
            </view>

            <view class="time-selection">
              <text class="selection-title">选择日期</text>
              <view class="day-selector">
                <view class="day-item" v-for="(day, index) in weekDays" :key="index"
                  :class="{ active: selectedDay === day.value }" @click="selectDay(day.value)">
                  <text class="day-text">{{ day.label }}</text>
                </view>
              </view>
            </view>

            <view class="time-selection">
              <text class="selection-title">选择时段</text>
              <view class="time-selector">
                <view class="time-item" v-for="(time, index) in timePeriods" :key="index"
                  :class="{ active: selectedTime === time.value }" @click="selectTime(time.value)">
                  <text class="time-text">{{ time.label }}</text>
                </view>
              </view>
            </view>

            <button class="confirm-btn" @click="confirmSelection">确认</button>
          </view>
        </view>
      </view>

      <!-- 购物车明细弹窗 -->
      <view class="cart-detail-modal" v-if="showCartDetailModal">
        <view class="modal-content">
          <view class="modal-header">
            <text class="modal-title">调理计划明细</text>
            <view class="close-btn" @click="closeCartDetailModal">
              <text class="close-icon">×</text>
            </view>
          </view>
          <view class="modal-body">
            <view class="cart-items">
              <view class="cart-empty" v-if="cartItems.length === 0">
                <text>购物车为空</text>
              </view>
              <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
                <view class="cart-item-content">
                  <image class="cart-item-image" :src="`../../static/shop/${item.imageName}`" mode="aspectFit">
                  </image>
                  <view class="cart-item-info">
                    <text class="cart-item-title">{{ item.title }}</text>
                    <text class="cart-item-score">+{{ item.score }}分</text>
                    <view class="cart-item-time">
                      <text class="time-label">{{ getDayLabel(item.day) }}</text>
                      <text class="time-separator">|</text>
                      <text class="time-label">{{ getTimeLabel(item.time) }}</text>
                    </view>
                  </view>
                  <view class="cart-item-actions">
                    <view class="cart-edit-btn" @click="editCartItem(item)">
                      <text class="edit-icon">编辑</text>
                    </view>
                    <view class="cart-delete-btn" @click="removeCartItem(index)">
                      <text class="delete-icon">删除</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="cart-summary">
              <text class="cart-total">总加分: +{{ totalScore }}分</text>
            </view>

            <button class="back-btn" @click="closeCartDetailModal">返回</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [],
      showDetailModal: false,
      showCartDetailModal: false,
      currentPlan: null,
      editingCartItem: null,
      selectedDay: 'monday',
      selectedTime: 'morning',
      weekDays: [
        { label: '周一', value: 'monday' },
        { label: '周二', value: 'tuesday' },
        { label: '周三', value: 'wednesday' },
        { label: '周四', value: 'thursday' },
        { label: '周五', value: 'friday' },
        { label: '周六', value: 'saturday' },
        { label: '周日', value: 'sunday' }
      ],
      timePeriods: [
        { label: '早上 6:00-9:00', value: 'morning' },
        { label: '上午 9:00-12:00', value: 'forenoon' },
        { label: '中午 12:00-14:00', value: 'noon' },
        { label: '下午 14:00-18:00', value: 'afternoon' },
        { label: '晚上 18:00-22:00', value: 'evening' }
      ]
    };
  },
  computed: {
    totalScore() {
      return this.cartItems.reduce((total, item) => total + item.score, 0).toFixed(1);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    addToCart(plan) {
      // 检查是否已经在购物车中
      const existingItem = this.cartItems.find(item => item.id === plan.id);
      if (!existingItem) {
        this.cartItems.push({ ...plan, day: 'monday', time: 'morning' });
        uni.showToast({
          title: '已添加到购物车',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '该项目已在购物车中',
          icon: 'none'
        });
      }
    },
    showPlanDetail(plan) {
      this.currentPlan = plan;
      this.editingCartItem = null;
      this.selectedDay = 'monday';
      this.selectedTime = 'morning';
      this.showDetailModal = true;
    },
    closeDetailModal() {
      this.showDetailModal = false;
      this.currentPlan = null;
      this.editingCartItem = null;
    },
    selectDay(day) {
      this.selectedDay = day;
    },
    selectTime(time) {
      this.selectedTime = time;
    },
    viewCartDetail() {
      if (this.cartItems.length === 0) {
        uni.showToast({
          title: '购物车为空',
          icon: 'none'
        });
        return;
      }

      this.showCartDetailModal = true;
    },
    closeCartDetailModal() {
      this.showCartDetailModal = false;
      this.editingCartItem = null;
    },
    editCartItem(item) {
      this.editingCartItem = item;
      this.selectedDay = item.day;
      this.selectedTime = item.time;
      this.showDetailModal = true;
    },
    removeCartItem(index) {
      this.cartItems.splice(index, 1);
      uni.showToast({
        title: '已移除',
        icon: 'none'
      });
    },
    confirmSelection() {
      if (this.editingCartItem) {
        // 处理编辑购物车项目的情况
        this.confirmEditing();
        return;
      }

      if (this.currentPlan) {
        // 检查是否已经在购物车中
        const existingIndex = this.cartItems.findIndex(item => item.id === this.currentPlan.id);

        if (existingIndex !== -1) {
          // 更新已有项的时间设置
          this.cartItems[existingIndex].day = this.selectedDay;
          this.cartItems[existingIndex].time = this.selectedTime;
          uni.showToast({
            title: '已更新时间设置',
            icon: 'none'
          });
        } else {
          // 添加到购物车
          this.cartItems.push({
            ...this.currentPlan,
            day: this.selectedDay,
            time: this.selectedTime
          });
          uni.showToast({
            title: '已添加到购物车',
            icon: 'none'
          });
        }

        this.closeDetailModal();
      }
    },
    checkout() {
      if (this.cartItems.length === 0) {
        uni.showToast({
          title: '请先添加调理计划',
          icon: 'none'
        });
        return;
      }

      // 这里可以导航到结算页面
      uni.showToast({
        title: '结算功能开发中',
        icon: 'none'
      });
    },
    getDayLabel(dayValue) {
      const day = this.weekDays.find(d => d.value === dayValue);
      return day ? day.label : '';
    },
    getTimeLabel(timeValue) {
      const time = this.timePeriods.find(t => t.value === timeValue);
      return time ? time.label : '';
    },
    confirmEditing() {
      if (this.editingCartItem) {
        this.editingCartItem.day = this.selectedDay;
        this.editingCartItem.time = this.selectedTime;

        uni.showToast({
          title: '已更新时间设置',
          icon: 'none'
        });

        this.closeDetailModal();
        this.editingCartItem = null;
      }
    }
  }
};
</script>

<style lang="scss">
/* 多邻国风格的颜色变量 */
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-purple: #ce82ff;
$duolingo-orange: #ff9600;
$duolingo-red: #ff4b4b;
$duolingo-light-gray: #f7f7f7;
$duolingo-dark-gray: #4b4b4b;

.conditioning-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $duolingo-light-gray;
  position: relative;
}

/* 顶部导航栏（仅返回按钮） */
.back-nav {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  position: relative;
}

.transparent-back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 30rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.page-title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  pointer-events: none;
}

/* 商品列表区域 */
.plan-list {
  flex: 1;
  padding: 20rpx;
}

.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.plan-item {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.plan-content {
  display: flex;
  padding: 20rpx;
  align-items: center;
}

.plan-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  background-color: $duolingo-light-gray;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.plan-info {
  flex: 1;
}

.plan-title {
  font-size: 28rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
  margin-bottom: 10rpx;
  display: block;
}

.plan-score {
  display: flex;
  align-items: center;
}

.score-value {
  font-size: 30rpx;
  font-weight: bold;
  color: $duolingo-green;
}

.score-text {
  font-size: 24rpx;
  color: $duolingo-dark-gray;
  margin-left: 4rpx;
}

.plan-actions {
  display: flex;
  gap: 20rpx;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: $duolingo-green;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

.add-icon {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
}

.type-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: $duolingo-blue;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
}

.type-icon {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
}

/* 底部操作栏 */
.bottom-bar {
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2rpx solid $duolingo-light-gray;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

.cart-info {
  display: flex;
  flex-direction: column;
}

.selected-count {
  font-size: 26rpx;
  color: $duolingo-dark-gray;
}

.total-score {
  font-size: 30rpx;
  font-weight: bold;
  color: $duolingo-green;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.detail-btn {
  height: 70rpx;
  padding: 0 30rpx;
  border-radius: 35rpx;
  background-color: $duolingo-light-gray;
  color: $duolingo-dark-gray;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkout-btn {
  height: 70rpx;
  padding: 0 30rpx;
  border-radius: 35rpx;
  background-color: $duolingo-blue;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 计划详情弹窗 */
.plan-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 90%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid $duolingo-light-gray;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
}

.close-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25rpx;
  background-color: $duolingo-light-gray;
}

.close-icon {
  font-size: 36rpx;
  color: $duolingo-dark-gray;
}

.modal-body {
  padding: 30rpx;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.detail-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 15rpx;
  background-color: $duolingo-light-gray;
  margin-right: 20rpx;
}

.detail-info {
  flex: 1;
}

.detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
  margin-bottom: 10rpx;
  display: block;
}

.detail-score {
  font-size: 30rpx;
  font-weight: bold;
  color: $duolingo-green;
}

.time-selection {
  margin-bottom: 30rpx;
}

.selection-title {
  font-size: 28rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
  margin-bottom: 15rpx;
  display: block;
}

.day-selector,
.time-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.day-item,
.time-item {
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  background-color: $duolingo-light-gray;
  transition: all 0.2s ease;
}

.day-item.active,
.time-item.active {
  background-color: $duolingo-blue;
}

.day-text,
.time-text {
  font-size: 26rpx;
  color: $duolingo-dark-gray;
}

.day-item.active .day-text,
.time-item.active .time-text {
  color: #fff;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: $duolingo-green;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}

/* 购物车明细弹窗 */
.cart-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 90%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid $duolingo-light-gray;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
}

.close-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25rpx;
  background-color: $duolingo-light-gray;
}

.close-icon {
  font-size: 36rpx;
  color: $duolingo-dark-gray;
}

.modal-body {
  padding: 30rpx;
  overflow-y: auto;
}

.cart-items {
  width: 100%;
  margin-bottom: 30rpx;
}

.cart-empty {
  padding: 40rpx 0;
  text-align: center;
  color: $duolingo-dark-gray;
  font-size: 28rpx;
}

.cart-item {
  background-color: $duolingo-light-gray;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.cart-item-content {
  display: flex;
  padding: 20rpx;
  align-items: center;
}

.cart-item-image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1;
}

.cart-item-title {
  font-size: 28rpx;
  font-weight: bold;
  color: $duolingo-dark-gray;
  margin-bottom: 6rpx;
  display: block;
}

.cart-item-score {
  font-size: 26rpx;
  font-weight: bold;
  color: $duolingo-green;
  margin-bottom: 6rpx;
  display: block;
}

.cart-item-time {
  display: flex;
  align-items: center;
}

.time-label {
  font-size: 24rpx;
  color: $duolingo-dark-gray;
}

.time-separator {
  margin: 0 10rpx;
  font-size: 24rpx;
  color: $duolingo-dark-gray;
}

.cart-item-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.cart-edit-btn,
.cart-delete-btn {
  padding: 10rpx 15rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart-edit-btn {
  background-color: $duolingo-blue;
  color: #fff;
}

.cart-delete-btn {
  background-color: $duolingo-red;
  color: #fff;
}

.edit-icon,
.delete-icon {
  font-size: 24rpx;
}

.cart-summary {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: $duolingo-light-gray;
  border-radius: 16rpx;
}

.cart-total {
  font-size: 30rpx;
  font-weight: bold;
  color: $duolingo-green;
  text-align: right;
  display: block;
}

.back-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: $duolingo-blue;
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
</style>
